import React, { PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
// import styles from  './style.module.scss';
import { PullToRefresh } from 'antd-mobile';

class ScrollCustom extends PureComponent {
    constructor (props) {
        super(props)
        this.state = {
            courseCheckIndex: null,
            refreshing: false,
            down: true,
            height: document.documentElement.clientHeight
        };
    }
    render () {
        const { children, acquireMusicScoreData } = this.props;
        return (
            <PullToRefresh
                damping={60}
                ref={el => this.ptr = el}
                style={{
                    height: this.state.height,
                    overflow: 'auto',
                }}
                indicator={this.state.down ? {} : { deactivate: '上拉可以刷新' }}
                direction={this.state.down ? 'down' : 'up'}
                refreshing={this.state.refreshing}
                onRefresh={() => {
                    console.log('刷新')
                    this.setState({ refreshing: true });
                    setTimeout(() => {
                        this.setState({ refreshing: false });
                    }, 1000);
                    if (!this.state.down) {
                        acquireMusicScoreData()
                    }
                }}
            >
                <div>
                    {
                        children
                    }
                </div>
            </PullToRefresh>
        )
    }
    componentDidMount() {
        console.log(findDOMNode(this.ptr))
        const scrollDOM = findDOMNode(this.ptr)
        const hei = this.state.height - scrollDOM.offsetTop;
        
        this.setState({
            height: hei
        })
        // const mybody = document.getElementsByTagName('body')[0];
        // console.log(mybody)


        const self = this;
        let startX, startY, moveEndX, moveEndY, X, Y;   
        scrollDOM.addEventListener('touchstart', function(e) {
            // e.preventDefault();
            startX = e.touches[0].pageX;
            startY = e.touches[0].pageY;
        }, false);
        scrollDOM.addEventListener('touchmove', function(e) {
            // e.preventDefault();
            moveEndX = e.changedTouches[0].pageX;
            moveEndY = e.changedTouches[0].pageY;
            X = moveEndX - startX;
            Y = moveEndY - startY;
            if( Math.abs(X) > Math.abs(Y) && X > 0 ) {// right
                console.log('向右');
            }
            else if( Math.abs(X) > Math.abs(Y) && X < 0 ) {// left
                console.log('向左');
            }
            else if( Math.abs(Y) > Math.abs(X) && Y > 0) {// down
                console.log('向下');
                self.setState({
                    down: true
                });
            }
            else if( Math.abs(Y) > Math.abs(X) && Y < 0 ) {// up
                console.log('向上');
                self.setState({
                    down: false
                });
            }
            else{//没有发生滑动
                console.log('没有发生滑动');
            }
        });
    }
    watchScrollDirection() {

    }


}
export default connect(null,null)(withRouter(ScrollCustom));
